<template>
  <div>
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="container">
      <TableCustom
        :columns="columns"
        :tableData="cascaderOptions"
        row-key="value"
        :has-pagination="false"
        :viewFunc="handleView"
        :delFunc="handleDelete"
        :editFunc="handleEdit"
      >
        <template #toolbarBtn>
          <el-button type="warning" :icon="CirclePlusFilled" @click="handleAdd"
            >新增</el-button
          >
        </template>
        <template #icon="{ rows }">
          <el-icon>
            <component :is="rows.icon"></component>
          </el-icon>
        </template>
      </TableCustom>
    </div>
    <el-dialog
      :title="isEdit ? '编辑' : '新增'"
      v-model="visible"
      width="700px"
      destroy-on-close
      :close-on-click-modal="closeDialog"
      @close="closeDialog"
    >
      <TableEdit
        :form-data="rowData"
        :options="options"
        :edit="isEdit"
        :update="updateData"
        @closeDialogP="closeDialog"
      >
        <template #parent>
          <el-cascader
            v-model="selectParentTagId"
            :options="cascaderOptions"
            :props="{ checkStrictly: true }"
            clearable
            placeholder="请选择父标签"
          />
          <div>（创建一级标签时，此处不选）</div>
        </template>
      </TableEdit>
    </el-dialog>
    <el-dialog title="详情" v-model="visible1" width="700px" destroy-on-close>
      <TableDetail :data="viewData" @closeDialogP="visible1 = false">
        <template #icon="{ rows }">
          <el-icon>
            <component :is="rows.icon"></component>
          </el-icon>
        </template>
      </TableDetail>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="system-menu">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { Menus } from "@/types/menu";
import TableCustom from "@/components/table-custom.vue";
import TableDetail from "@/components/table-detail.vue";
import { FormOption, FormOptionList } from "@/types/form-option";
// import { menuData } from "@/components/menu";
import {
  fetchSongTagTreeData,
  fetchSongTagCreate,
  fetchSongTagDeleteById,
} from "@/api/configuration";

// 表格相关
let columns = ref([
  { prop: "label", label: "标签名称", align: "left" },
  // { prop: "tagLevel", label: "标签层级" },
  { prop: "value", label: "标签id" },
  { prop: "songCount", label: "歌曲数量" },
  { prop: "remark", label: "备注" },
  { prop: "operator", label: "操作", width: 300, fixed: "right" },
]);

// 查询相关
const query = reactive({
  keyword: "",
});
const searchOpt = ref<FormOptionList[]>([
  { type: "input", label: "歌曲标签：", prop: "keyword",placeholder:"请输入歌曲标签" },
]);

const menuData = ref([]);
const cascaderOptions = ref([]);

const getOptions = (data: any) => {
  return data.map((item) => {
    const a: any = {
      label: item.tagName,
      value: item.songTagId,
      tagLevel: item.tagLevel,
      songCount: item.songCount,
      remark: item.remark,
      parentTagId: item.parentTagId,
    };
    if (item.songTagList) {
      a.children = getOptions(item.songTagList);
    }
    // console.log("走没有呢");
    // console.log(a);
    return a;
  });
};
// 获取歌曲标签树
const getData = async () => {
  let params = {
    isShowNoCount: 1, //是否显示没有歌曲的标签 0-否 1-是
    catalogKeyword: query.keyword,
  };
  const res = await fetchSongTagTreeData(params);
  console.log("获取歌曲标签树");
  console.log(res.data);
  menuData.value = res.data.data;
  console.log(menuData.value);
  // page.total = res.data.data.total;
  // console.log(page.total);
  cascaderOptions.value = getOptions(menuData.value);
  console.log("11111");
  console.log(cascaderOptions.value);
};
getData();

// 搜索
const handleSearch = () => {
  getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: "100px",
  span: 24,
  list: [
    { type: "input", label: "标签名称", prop: "label", required: true,placeholder:"请输入标签名称" },
    { type: "input", label: "备注", prop: "remark",placeholder:"请输入备注" },
    { type: "parent", label: "父标签", prop: "parent",placeholder:"请选择父标签" },
    // { type: "upload", label: "标签图片", prop: "thumb" },
  ],
});
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref<any>({});
const selectParentTagId = ref<any>(0);

// 新增
const handleAdd = (row) => {
  console.log("新增");
  selectParentTagId.value = 0;
  rowData.value = { ...row };
  console.log(rowData.value);

  isEdit.value = false;
  visible.value = true;
};

//编辑
const handleEdit = (row) => {
  console.log("编辑");
  rowData.value = { ...row };
  console.log(rowData.value);
  selectParentTagId.value = rowData.value.parentTagId;
  console.log(selectParentTagId);
  isEdit.value = true;
  visible.value = true;
};

const updateData = async (data) => {
  let datas = {};

  console.log(selectParentTagId.value);
  let parentTagId = selectParentTagId.value || 0;
  if (
    selectParentTagId.value &&
    Array.isArray(selectParentTagId.value) &&
    selectParentTagId.value.length > 0
  ) {
    parentTagId = selectParentTagId.value[selectParentTagId.value.length - 1];
  } else if (
    selectParentTagId.value &&
    typeof selectParentTagId.value === "string"
  ) {
    console.log("不处理");
  } else {
    parentTagId = 0;
  }

  if (isEdit.value) {
    datas = {
      remark: data.remark,
      tagName: data.label,
      songTagId: data.value,
      parentTagId: parentTagId,
    };
  } else {
    datas = {
      remark: data.remark,
      tagName: data.label,
      parentTagId: parentTagId,
    };
  }
  console.log("最终编辑或者新增的数据---是");
  console.log(datas);
  const res = await fetchSongTagCreate(datas);
  console.log("新增歌曲标签");
  console.log(res.data);
  if (res.data.code == 0) {
    ElMessage.success("成功");
  } else {
    ElMessage.error(res.data.msg);
  }
  closeDialog();
  getData();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
  row: {},
  list: [],
});
const handleView = (row) => {
  viewData.value.row = { ...row };
  viewData.value.list = [
    {
      prop: "value",
      label: "标签ID",
    },
    {
      prop: "label",
      label: "标签名称",
    },
    {
      prop: "parentTagId",
      label: "父标签ID",
    },
    {
      prop: "remark",
      label: "备注",
    },
  ];
  visible1.value = true;
};

// 删除相关
const handleDelete = async (row) => {
  console.log("删除");
  console.log(row);
  let datas = {
    id: row.value,
  };
  const res = await fetchSongTagDeleteById(datas);
  if (res.data.code == 0) {
    ElMessage.success("删除成功");
    getData();
  }
};
</script>

<style scoped></style>
